<template>
	<div id="realName">
		<!--<el-breadcrumb separator-class="el-icon-arrow-right">-->
		<!--<el-breadcrumb-item >实名认证</el-breadcrumb-item>-->
		<!--</el-breadcrumb>-->
		<div id="upload">

			<el-form ref="form" :model="realName" label-width="80px" style="text-align: center">
				<el-form-item label="" :rules="[{ required: true}]">
					<el-upload list-type="picture-card" :action=uploadUrl :data="fileInfo.author" :on-success="sowSuccess" :on-remove="handleRemove" :limit="2">
						<i class="el-icon-plus"></i>
						<div slot="tip" class="el-upload__tip">请拍摄证件照片并上传，注意避免证件反光</div>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible" size="tiny">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
					<img src="../assets/5f17438a.upload-idcard-tip.png" alt="" style="margin: 15px 0"><br>
					<el-button type="success" @click="real">进行认证</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import { submitfile, submitreal } from "@/api/index";
import { mapState, mapMutations } from "vuex";
export default {
    data() {
        return {
            realName: {},
            dialogImageUrl: "",
            dialogVisible: false,
            uploadUrl: submitfile,
            fileInfo: {
                shenqingbiaoqianzi: {
                    type: "pic",
                    folder: "authentication"
                },
                auth_pic: ""
            }
        };
    },
	computed: {
		...mapState([
			'croUser',
		]),
	},
	methods: {
		...mapMutations([
			'OUT_LOGIN',
		]),
        onSubmit() {
            console.log("submit!");
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        sowSuccess(res, file) {
            if (res.data) {
                this.auth_pic = res.data;
            }
        },
        real() {
            // ?auth_pic=5&user_id=15
            let userdel = {
                auth_pic: this.auth_pic,
                user_id: this.croUser.user_id,
            };
            submitreal(userdel).then(data => {
                if (data.data) {
                    this.$message({
                        showClose: true,
                        message: "实名认证成功",
                        type: "success"
                    });
                    this.$router.push("/copyright");
                } else {
                    this.$message({
                        showClose: true,
                        message: data.msg,
                        type: "error"
                    });
                    this.$router.push("/login");
                }
            });
        }
    }
};
</script>
<style scoped lang="scss">
#realName {
    width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
    min-height: calc(100vh - 270px);
    #upload {
        padding: 50px;
    }
}
</style>
